<!DOCTYPE html>
<html  lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!--360浏览器优先以webkit内核解析-->
    <title>睡眠中心</title>
    <link rel="shortcut icon" href="favicon.ico">
    <link href="../static/css/bootstrap.min.css" th:href="@{/css/bootstrap.min.css}" rel="stylesheet"/>
    <link href="../static/css/font-awesome.min.css" th:href="@{/css/font-awesome.min.css}" rel="stylesheet"/>
    <link href="../static/css/style.min.css" th:href="@{/css/style.min.css}" rel="stylesheet"/>
</head>

<body class="gray-bg">
<div class="wrapper wrapper-content">
    <div class="row">
        <h2 align="center">睡眠报告</h2>
        <div class="panel-body">
            <div class="col-sm-12">
                <div class='panel panel-default'>
                    <div class='panel-heading'>
                        <h4>个人信息</h4>
                    </div>
                    <div class='panel-body'>
                        <label class="col-sm-1 control-label">姓名：</label><div class="col-sm-2"><div class="input-group m-b"><input type="text" disabled="" th:field="*{user.userName}" class="form-control"></div></div>
                        <label class="col-sm-1 control-label">年龄：</label><div class="col-sm-2"><div class="input-group m-b"><input type="text" disabled="" th:field="*{user.age}" class="form-control"></div></div>
                        <label class="col-sm-1 control-label">性别：</label><div class="col-sm-2"><div class="input-group m-b"><input type="text" disabled="" th:value="${sex}" class="form-control"></div></div>
                        <label class="col-sm-1 control-label">身高：</label><div class="col-sm-2"><div class="input-group m-b"><input type="text" disabled="" th:field="*{user.height}" class="form-control"></div></div>
                        <label class="col-sm-1 control-label">体重：</label><div class="col-sm-2"><div class="input-group m-b"><input type="text" disabled="" th:field="*{user.weight}" class="form-control"></div></div>
                        <label class="col-sm-1 control-label">联系方式：</label><div class="col-sm-2"><div class="input-group m-b"><input type="text" disabled="" th:field="*{user.phonenumber}" class="form-control"></div></div>
<!--                        <label class="col-sm-1 control-label">病历：</label><div class="col-sm-11"><input type="text" disabled="" th:field="*{user.medical}" class="form-control"></div>-->
                    </div>
                </div>
            </div>
            <div class="col-sm-12">
                <div class='panel panel-default'>
                    <div class='panel-heading'>
                        <h4>睡眠统计</h4>
                    </div>
                    <div class='panel-body'>
<!--                        <label class="col-sm-6 control-label">记录开始时间(hh:mm:ss)：</label><div class="col-sm-6"><div class="input-group m-b"><input type="text" disabled="" th:value="${radarData.get('recordStart')}" class="form-control"></div></div>-->
<!--                        <label class="col-sm-6 control-label">记录结束时间(hh:mm:ss)：</label><div class="col-sm-6"><div class="input-group m-b"><input type="text" disabled="" th:value="${radarData.get('recordEnd')}" class="form-control"></div></div>-->
<!--                        <label class="col-sm-6 control-label">总记录时间(hh:mm:ss)：</label><div class="col-sm-6"><div class="input-group m-b"><input type="text" disabled="" th:value="${radarData.get('totalRecord')}" class="form-control"></div></div>-->
<!--                        <label class="col-sm-6 control-label">总睡眠时间(hh:mm:ss)：</label><div class="col-sm-6"><div class="input-group m-b"><input type="text" disabled="" th:value="${radarData.get('totalSleep')}" class="form-control"></div></div>-->
<!--                        <label class="col-sm-6 control-label">睡眠质量：</label><div class="col-sm-6"><div class="input-group m-b"><input type="text" disabled="" th:value="${radarData.get('sleepScale')}" class="form-control"><span class="input-group-addon">%</span></div></div>-->
<!--                        <label class="col-sm-6 control-label">深度睡眠累计时间(hh:mm:ss)：</label><div class="col-sm-6"><div class="input-group m-b"><input type="text" disabled="" th:value="${radarData.get('deepCumulative')}" class="form-control"></div></div>-->
<!--                        <label class="col-sm-6 control-label">浅度睡眠累计时间(hh:mm:ss)：</label><div class="col-sm-6"><div class="input-group m-b"><input type="text" disabled="" th:value="${radarData.get('shallowCumulative')}" class="form-control"></div></div>-->
<!--                        <label class="col-sm-6 control-label">清醒累计时间(hh:mm:ss)：</label><div class="col-sm-6"><div class="input-group m-b"><input type="text" disabled="" th:value="${radarData.get('soberCumulative')}" class="form-control"></div></div>-->
<!--                        <label class="col-sm-6 control-label">深度睡眠百分比：</label><div class="col-sm-6"><div class="input-group m-b"><input type="text" disabled="" th:value="${radarData.get('deepRatio')}" class="form-control"><span class="input-group-addon">%</span></div></div>-->
<!--                        <label class="col-sm-6 control-label">浅度睡眠百分比：</label><div class="col-sm-6"><div class="input-group m-b"><input type="text" disabled="" th:value="${radarData.get('shallowRatio')}" class="form-control"><span class="input-group-addon">%</span></div></div>-->
<!--                        <label class="col-sm-6 control-label">清醒百分比：</label><div class="col-sm-6"><div class="input-group m-b"><input type="text" disabled="" th:value="${radarData.get('soberRatio')}" class="form-control"><span class="input-group-addon">%</span></div></div>-->
                        <label class="col-sm-6 control-label">记录开始时间(hh:mm:ss)：</label><div class="col-sm-6"><div class="input-group m-b"><input type="text" disabled="" id="recordStart" class="form-control"></div></div>
                        <label class="col-sm-6 control-label">记录结束时间(hh:mm:ss)：</label><div class="col-sm-6"><div class="input-group m-b"><input type="text" disabled="" id="recordEnd" class="form-control"></div></div>
                        <label class="col-sm-6 control-label">总记录时间(hh:mm:ss)：</label><div class="col-sm-6"><div class="input-group m-b"><input type="text" disabled="" id="totalRecord" class="form-control"></div></div>
                        <label class="col-sm-6 control-label">总睡眠时间(hh:mm:ss)：</label><div class="col-sm-6"><div class="input-group m-b"><input type="text" disabled="" id="totalSleep" class="form-control"></div></div>
                        <label class="col-sm-6 control-label">睡眠质量：</label><div class="col-sm-6"><div class="input-group m-b"><input type="text" disabled="" id="sleepScale" class="form-control"></div></div>
                        <label class="col-sm-6 control-label">深度睡眠累计时间(hh:mm:ss)：</label><div class="col-sm-6"><div class="input-group m-b"><input type="text" disabled="" id="deepCumulative" class="form-control"></div></div>
                        <label class="col-sm-6 control-label">浅度睡眠累计时间(hh:mm:ss)：</label><div class="col-sm-6"><div class="input-group m-b"><input type="text" disabled="" id="shallowCumulative" class="form-control"></div></div>
                        <label class="col-sm-6 control-label">清醒累计时间(hh:mm:ss)：</label><div class="col-sm-6"><div class="input-group m-b"><input type="text" disabled="" id="soberCumulative" class="form-control"></div></div>
                        <label class="col-sm-6 control-label">深度睡眠百分比：</label><div class="col-sm-6"><div class="input-group m-b"><input type="text" disabled="" id="deepRatio" class="form-control"><span class="input-group-addon">%</span></div></div>
                        <label class="col-sm-6 control-label">浅度睡眠百分比：</label><div class="col-sm-6"><div class="input-group m-b"><input type="text" disabled="" id="shallowRatio" class="form-control"><span class="input-group-addon">%</span></div></div>
                        <label class="col-sm-6 control-label">清醒百分比：</label><div class="col-sm-6"><div class="input-group m-b"><input type="text" disabled="" id="soberRatio" class="form-control"><span class="input-group-addon">%</span></div></div>
                        <input id="deviceCode" type="hidden" disabled="" th:value="*{deviceCode}" class="form-control">
                        <input id="radarData" type="hidden" disabled="" th:value="*{radarData}" class="form-control">
                    </div>
                </div>
            </div>
            <div class="col-sm-12">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h4>心率</h4>
                    </div>
                    <div class="panel-body">
                        <div class="echarts" id="heart-rate"></div>
                    </div>
                </div>
            </div>
            <div class="col-sm-12">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h4>呼吸率</h4>
                    </div>
                    <div class="panel-body">
                        <div class="echarts" id="respiratory-rate"></div>
                    </div>
                </div>
            </div>
            <div class="col-sm-12">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h4>睡眠状态</h4>
                    </div>
                    <div class="panel-body">
                        <div class="echarts" id="sleep-state"></div>
                    </div>
                </div>
            </div>
            <div class="col-sm-12">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h4>运动体征</h4>
                    </div>
                    <div class="panel-body">
                        <div class="echarts" id="sports-signs"></div>
                    </div>
                </div>
            </div>
            <div class="col-sm-12">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h4>睡眠</h4>
                    </div>
                    <div class="panel-body">
                        <div class="echarts" id="sleep-scale"></div>
                    </div>
                </div>
            </div>
            <div class="col-sm-12">
                <div class='panel panel-default'>
                    <div class='panel-heading'>
                        <h4>问卷调查</h4>
                    </div>
                    <div id="answer" class='panel-body'>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script th:src="@{/js/jquery.min.js}"></script>
<script th:src="@{/js/bootstrap.min.js}"></script>
<script th:src="@{/ajax/libs/layer/layer.min.js}"></script>
<script th:src="@{/js/sockjs.min.js}"></script>
<script th:src="@{/js/stomp.js}"></script>
<th:block th:include="include :: footer" />
<th:block th:include="include :: datetimepicker-js" />
<script type="text/javascript" src="https://fastly.jsdelivr.net/npm/echarts@5.3.3/dist/echarts.min.js"></script>
<script type="text/javascript">
    var userId = [[${user.userId}]];
    var radarData = $("#radarData").val();
    var obj = JSON.parse(radarData);
    $('#recordStart').val(obj.recordStart);
    $('#recordEnd').val(obj.recordEnd);
    $('#totalRecord').val(obj.totalRecord);
    $('#totalSleep').val(obj.totalSleep);
    $('#sleepScale').val(obj.sleepScale);
    $('#deepCumulative').val(obj.deepCumulative);
    $('#shallowCumulative').val(obj.shallowCumulative);
    $('#soberCumulative').val(obj.soberCumulative);
    $('#deepRatio').val(obj.deepRatio);
    $('#shallowRatio').val(obj.shallowRatio);
    $('#soberRatio').val(obj.soberRatio);
    var heartDataX = obj.heartDataX;
    var heartDataY = obj.heartDataY;
    var respiratoryDataX = obj.respiratoryDataX;
    var respiratoryDataY = obj.respiratoryDataY;
    var sleepMinX = obj.sleepMinX;
    var sleepTypeItem = obj.sleepTypeItem;
    var sleepDuration = obj.sleepDuration;
    var sportsMinX = obj.sportsMinX;
    var sportsTypeItem = obj.sportsTypeItem;
    var sportsDuration = obj.sportsDuration;
    var sleepDataX = obj.sleepDataX;
    var sleepDataY = obj.sleepDataY;
    var sleepData = obj.sleepData;
    var sportsDataX = obj.sportsDataX;
    var sportsDataY = obj.sportsDataY;
    var sportsData = obj.sportsData;
    var scaleDataX = obj.scaleDataX;
    var scaleDataY = obj.scaleDataY;

    var heartDivId = "heart-rate";
    var heartTitle = "心率";
    var heartMinY = 50;
    createEchartLine(heartDivId,heartTitle,heartMinY,heartDataX,heartDataY,'');

    var respiratoryDivId = "respiratory-rate";
    var respiratoryTitle = "呼吸率";
    var respiratoryMinY = 0;
    createEchartLine(respiratoryDivId,respiratoryTitle,respiratoryMinY,respiratoryDataX,respiratoryDataY,'');

    var sleepDivId = "sleep-state";
    var sleepTitle = "睡眠状态";
    var sleepLegend = [{name: '深睡',color: '#3c78d8',selectedMode: false},{name: '浅睡',color: '#4ed984',selectedMode: false},{name: '清醒',color: '#ffc058',selectedMode: false}];
    // createEchartBar(sleepDivId,sleepTitle,sleepDataX,sleepDataY,sleepData,'');
    createEchartCustom(sleepDivId,sleepTitle,sleepLegend,sleepDataY,sleepMinX,sleepTypeItem,sleepDuration,'');

    var sportsDivId = "sports-signs";
    var sportsTitle = "运动体征";
    var sportsLegend = [{name: '静止',color: '#3c78d8',selectedMode: false},{name: '活跃',color: '#ffc058',selectedMode: false}];
    // createEchartBar(sportsDivId,sportsTitle,sportsDataX,sportsDataY,sportsData,'');
    createEchartCustom(sportsDivId,sportsTitle,sportsLegend,sportsDataY,sportsMinX,sportsTypeItem,sportsDuration,'');

    var scaleDivId = "sleep-scale";
    var scaleTitle = "睡眠质量";
    var scaleMinY = 0;
    createEchartLine(scaleDivId,scaleTitle,scaleMinY,scaleDataX,scaleDataY,'');
    $(function () {
        $.ajax({
            type: "post",
            dataType: "json",
            data: {
                userId: userId,
                surverId: 1
            },
            url: "/common/queryAnswer",
            success: function (res) {
                if(res.code != 0){
                    $.modal.msgError(res.msg);
                }else{
                    var html = "";
                    var answers = res.data;
                    if(!$.isEmptyObject(answers)){
                        for (let i = 0; i < answers.length; i++) {
                            var answerContent = answers[i].answerContent;
                            if($.isEmptyObject(answerContent)){
                                answerContent = "无"
                            }
                            html += "<label class='col-sm-12 control-label'>" + answers[i].problemOrderNum + "、" + answers[i].problemContent + "</label>" +
                                "<label class='col-sm-12 control-label'>" + answerContent + "</label>";
                        }
                        $('#answer').html(html);
                    }
                }
            }
        });
    });
    function createEchartLine(divId,title,minY,dataX,dataY,unit){
        var lineChart = echarts.init(document.getElementById(divId));
        var lineoption = {
            title: {
                text: title
            },
            animation: false,
            tooltip: {
                trigger: 'axis'
            },
            dataZoom: [
                {
                    show: true,
                    realtime: true,
                    start: 0,
                    end: 100
                },
                {
                    type: 'inside',
                    realtime: true,
                    start: 0,
                    end: 100
                }
            ],
            xAxis: [
                {
                    type: 'category',
                    data: dataX
                }
            ],
            yAxis: [
                {
                    min: minY,
                    type: 'value',
                    axisLabel: {
                        formatter: '{value} ' + unit
                    }
                }
            ],
            series: [
                {
                    name: title,
                    type: 'line',
                    data: dataY
                }
            ]
        };
        lineChart.setOption(lineoption);
        $(window).resize(lineChart.resize);
        return lineChart.getDataURL(lineoption);
    }
    function createEchartCustom(divId,title,legends,dataY,minX,typeItem,duration,unit){
        // let projectItemStartValue = dataXStart.map((item)=>{
        //     return new Date(item).valueOf();
        // });
        // let projectItemDuringValue = dataXEnd.map((item,i)=>{
        //     return new Date(item).valueOf() - projectItemStartValue[i]
        // });
        // let dateMin = minX;
        // let projectItemStartValue = [5000000000000, 90000000000000, 124500000000000, 153000000000000, 137600000000000, 137600000000000];
        // let projectItemDuringValue = [90000000000000, 34500000000000, 39300000000000, 13500000000000, 17800000000000, 28600000000000];
        // let dateMin = 5000000000000;
        // let projectItemStartValue = [1640995200000, 1641168000000, 1641772800000, 1642291200000, 1642550400000];
        // let projectItemDuringValue = [86400000, 777600000, 518400000, 259200000, 86400000];
        // let dateMin = 5000000000000;
        // let projectItemStartValue = [1640995200000, 1641168000000, 1641772800000, 1642291200000, 1642550400000];
        // let projectItemDuringValue = [86400000, 777600000, 518400000, 259200000, 86400000];
        // let dateMin = 1640995200000;
        var barChart = echarts.init(document.getElementById(divId));
        var data = [];
        var startTime = minX;
        var categories = dataY;
        var typeItem = typeItem;
        var duration = duration;
        categories.forEach(function (category, index) {
            var baseTime = startTime;
            for (var i = 0; i < duration.length; i++) {
                data.push({
                    name: typeItem[i].name,
                    value: [typeItem[i].name, baseTime, (baseTime += duration[i]), duration[i]],
                    itemStyle: {
                        normal: {
                            color: typeItem[i].color
                        }
                    }
                });
            }
        });
        var baroption = {
            tooltip: {
                formatter: function (params) {
                    return params.marker + params.name + ': ' + intervalTime(params.value[3]);
                }
            },
            title: {
                text: title
            },
            legend: legends,
            dataZoom: [
                {
                    type: 'slider',
                    filterMode: 'weakFilter',
                    showDataShadow: false,
                    labelFormatter: ''
                },
                {
                    type: 'inside',
                    filterMode: 'weakFilter'
                }
            ],
            xAxis: {
                min: startTime,
                scale: true,
                axisLabel: {
                    color: '#333', // 坐标轴文字颜色
                    formatter: function (val) {
                        let date = new Date(val);
                        let dateLabel = date.getHours()+':'+date.getMinutes()+':'+date.getSeconds();
                        return dateLabel;
                    }
                }
            },
            yAxis: {
                data: categories
            },
            series: [
                {
                    type: 'custom',
                    renderItem: renderItem,
                    itemStyle: {
                        opacity: 0.8
                    },
                    encode: {
                        x: [1, 2],
                        y: 0
                    },
                    data: data
                }
            ]
        };
        barChart.setOption(baroption);
        $(window).resize(barChart.resize);
        return barChart.getDataURL(baroption);
    }
    function createEchartBar(divId,title,dataX,dataY,data,unit){
        var barChart = echarts.init(document.getElementById(divId));
        var baroption = {
            title: {
                text: title
            },
            tooltip: {
                trigger: 'axis'
            },
            dataZoom: [
                {
                    show: true,
                    realtime: true,
                    start: 0,
                    end: 100
                },
                {
                    type: 'inside',
                    realtime: true,
                    start: 0,
                    end: 100
                }
            ],
            xAxis: [
                {
                    type: 'category',
                    data: dataX
                }
            ],
            yAxis: [
                {
                    type: 'category',
                    data: dataY
                }
            ],
            series: [
                {
                    name: title,
                    type: 'line',
                    step: 'start',
                    data: data,
                    lineStyle:{
                        width: 50
                    }
                }
            ]
        };
        barChart.setOption(baroption);
        $(window).resize(barChart.resize);
        return barChart.getDataURL(baroption);
    }
    function exportPdf(){
        $.ajax({
            type: "post",
            dataType: "json",
            data: {
                userId: userId,
                deviceCode: $('#deviceCode').val(),
                surverId: 1,
                heartUrl: heartUrl,
                respiratoryUrl: respiratoryUrl,
                sleepUrl: sleepUrl,
                sportsUrl: sportsUrl,
                scaleUrl: scaleUrl
            },
            url: "/common/exportPdf",
            success: function (res) {
                if(res.code != 0){
                    $.modal.msgError(res.msg);
                }else{
                    $.modal.msg(res.msg);
                }
            }
        });
    }
    function renderItem(params, api) {
        var categoryIndex = api.value(0);
        var start = api.coord([api.value(1), categoryIndex]);
        var end = api.coord([api.value(2), categoryIndex]);
        var height = api.size([0, 1])[1] * 0.6;
        var rectShape = echarts.graphic.clipRectByRect(
            {
                x: start[0],
                y: start[1] - height / 2,
                width: end[0] - start[0],
                height: height
            },
            {
                x: params.coordSys.x,
                y: params.coordSys.y,
                width: params.coordSys.width,
                height: params.coordSys.height
            }
        );
        return (
            rectShape && {
                type: 'rect',
                transition: ['shape'],
                shape: rectShape,
                style: api.style()
            }
        );
    }
    function intervalTime(duration){
        var days = Math.floor(duration / (24 * 3600 * 1000));
        //计算出小时数
        var leave1 = duration % (24 * 3600 * 1000); //计算天数后剩余的毫秒数
        var hours = Math.floor(leave1 / (3600 * 1000));
        //计算相差分钟数
        var leave2 = leave1 % (3600 * 1000); //计算小时数后剩余的毫秒数
        var minutes = Math.floor(leave2 / (60 * 1000));
        //计算相差秒数
        var leave3 = leave2 % (60 * 1000); //计算分钟数后剩余的毫秒数
        var seconds = Math.round(leave3 / 1000);
        return days + "天 " + hours + "小时 " + minutes + " 分钟" + seconds + " 秒"
        // return days + "天 " + hours + "小时 ";
    }
</script>
</body>
</html>
